<template>
  <div>
    <textarea id="editor">{{ content }}</textarea>
  </div>  
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Jodit } from 'jodit';
import 'jodit/es2021/jodit.min.css';

let jodit: Jodit;

let content = ref(`22222222222 /n
<span style="text-decoration: underline; color: green; font-weight: blod; font-size: 50px;">monitor</span> 
says Dr. Lee, who leads the project. "We can find the most important areas for them and work to protect those `)

onMounted(() => {
  // jodit = Jodit.make('#editor', {});
  jodit = Jodit.make('#editor', {
    language: 'zh_cn',
    hidePoweredByJodit: true,
    showWordsCounter: false,
    uploader: {
      url: 'https://imagine-suxuehui.oss-cn-hangzhou.aliyuncs.com/', // 视频上传接口地址
      format: 'json', // 返回数据格式
      method: 'POST', // 请求方法
      // filesVariableName: 'video', // 上传文件的字段名
      prepareData: function (data) {
        console.log( data );
        data.append('id', 24); //
      },
      buildData: function (data) {
        return new Promise(function (resolve, reject) {
          var reader = new FileReader();
          reader.readAsDataURL(data.getAll('files[0]')[0]);
          reader.onload = function () {
            console.log( reader, 44444444444 );
            return resolve({
              image: reader.result
            });
          };
          reader.onerror = function (error) {
            reject(error);
          };
        });
      },
      isSuccess: async function (response) {
        console.log( 'isSuccess---------', response, this );
        // 判断上传是否成功
        return response && response.success;
      },
      // getMessage: function (resp) {
      //   console.log( 'getMessage', resp );
      //   return resp.msg;
      // },
      process: function (response) {
        console.log( 'process-------------', response );
        // 处理返回数据，将视频插入到编辑器中
        return {
          // files: response.data.map(item => item.url), // 提取视频 URL
          files: 'https://imagine-sxh.oss-cn-shanghai.aliyuncs.com/manageImg/teachingMaterial/12725.png'
        };
      },
      error: function (error) {
        console.error('视频上传失败:', error);
      },
    },
  });
})
</script>